<template>
  <div class="user-container">
    <!-- 用户信息 -->
    <div class="user-info">
      <div class="user-info-left">
        <AvatarBase
          :width="60"
          :border-radius="5"
          :show-detail="true"
        ></AvatarBase>
      </div>

      <div class="user-info-right">
        <div class="user-profile">
          <div class="username">
            <div class="name">
              {{ userProfile.remark || userProfile.nickname }}
            </div>

            <div class="gender">
              <span
                class="iconfont icon-nansheng"
                v-if="userProfile.gender === 1"
                style="color: #74cdfb; font-size: 14px"
              ></span>
              <span
                class="iconfont icon-nvsheng"
                v-else-if="userProfile.gender === 2"
                style="color: #fb7373; font-size: 14px"
              ></span>
            </div>

            <div class="is-collected" v-if="userProfile.isCollected">
              <span
                class="iconfont icon-shoucang1"
                style="color: #ffc300; font-size: 14px"
              ></span>
            </div>
          </div>

          <div
            v-if="userProfile.contactStatus === 1 || userProfile.nickname"
            class="user-nickname sort-content"
          >
            昵称：{{ userProfile.nickname }}
          </div>

          <div
            v-if="userProfile.contactStatus === 1 || userProfile.loginNumber"
            class="wechat-number sort-content text-ellipsis"
          >
            <span>微信号：{{ userProfile.loginNumber }}</span>
          </div>

          <div v-if="userProfile.province" class="region sort-content">
            地区：{{ userProfile.province }}
          </div>
        </div>

        <div class="more-btn"></div>
      </div>
    </div>

    <template
      v-if="userProfile.contactStatus === 1 && +userProfile.uid !== uid"
    >
      <div v-if="userProfile.remark" class="remark">
        <div class="left text-title">备注</div>
        <div class="right">{{ userProfile.remark }}</div>
      </div>

      <div
        v-if="
          userProfile.coGroupNumber ||
          userProfile.signature ||
          userProfile.source
        "
        class="user-more-info"
      >
        <!-- 共同群聊 -->
        <div v-if="userProfile.coGroupNumber" class="co-group-number">
          <div class="left text-title">共同群聊</div>
          <div class="right">{{ userProfile.coGroupNumber }}个</div>
        </div>

        <!-- 个性签名 -->
        <div v-if="userProfile.signature" class="signature">
          <div class="left text-title">个性签名</div>
          <div class="right">{{ userProfile.signature }}</div>
        </div>

        <!-- 添加来源 -->
        <div v-if="userProfile.source" class="source">
          <div class="left text-title">来源</div>
          <div class="right">
            {{
              userProfile.source === 1 ? "通过搜索手机号添加" : "通过二维码添加"
            }}
          </div>
        </div>
      </div>
    </template>

    <!-- 底部操作 -->
    <div
      :class="[+userProfile.uid === uid ? 'op-btn' : 'operate']"
      v-if="+userProfile.uid === uid"
    >
      <el-button type="primary" color="#07c160">发送消息</el-button>
    </div>

    <!-- 底部发送消息按钮 -->
    <div
      style="
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-self: center;
        align-items: center;
        margin-top: 10px;
      "
      v-else
    >
      <div class="operate" v-if="userProfile.contactStatus === 1">
        <div class="operate-item">
          <span class="iconfont icon-duihua"></span>
          <div>发消息</div>
        </div>
        <div class="operate-item">
          <span class="iconfont icon-yuyintonghua"></span>
          <div>语音聊天</div>
        </div>

        <div class="operate-item">
          <span class="iconfont icon-shipintonghua-tianchong"></span>
          <div>视频聊天</div>
        </div>
      </div>

      <el-button
        v-else
        class="'op-btn'"
        type="primary"
        color="#07c160"
        @click="handleAddToContact"
        >添加到通讯录</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import AvatarBase from "../avatar/AvatarBase.vue";
import { useUserStore } from "@/store/useUserStore";

const props = defineProps({
  userProfile: {
    type: Object,
    default: null,
  },
  containerWidth: {
    type: Number,
    default: 0,
  },
});

const userStore: any = useUserStore();
const uid = ref(userStore.userInfo.uid);

const handleAddToContact = () => {
  console.log("添加好友。。。");
  window.ipcRenderer.addToContact(props.userProfile.uid);
};
</script>

<style scoped lang="scss">
.user-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  overflow: hidden;

  .sort-content {
    color: #9e9e9e;
    font-size: 13px;
    padding: 3px 0;
  }

  .text-title {
    color: #9e9e9e;
    font-size: 15px;
  }

  .user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    height: 100px;
    width: 100%;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;

    .user-info-left {
      width: 60px;
      margin-right: 18px;
    }

    .user-info-right {
      width: 100%;
      height: 100%;
      padding-top: 13px;
      flex: 1;

      .user-profile {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        width: calc(100% - 78px);

        .username {
          display: flex;
          align-items: center;
          justify-content: center;

          .name {
            width: 100%;
            font-size: 18px;
            color: #000;
            margin-right: 5px;
          }

          .gender {
            font-size: 12px;
            color: #000;
            margin-right: 5px;

            span {
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }

          .is-collected {
            span {
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }

        .user-nickname {
          width: 100%;
        }

        .wechat-number {
          width: 100%; // 确保宽度占满父容器
        }
      }
    }
  }

  .remark {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #eaeaea;
  }

  .user-more-info {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #eaeaea;

    .co-group-number {
      display: flex;
      height: 16px;
    }

    .signature {
      display: flex;
      height: 16px;
      margin-top: 10px;
    }

    .source {
      display: flex;
      height: 16px;
      margin-top: 10px;
    }
  }

  .operate {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    width: 100%;
    color: #576b95;

    .operate-item {
      width: 72px;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 5px;
      border-radius: 5px;
      font-size: 14px;

      &:hover {
        background-color: #e9e9e9;
      }

      div {
        margin-top: 5px;
      }
    }
  }

  .op-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    margin-top: 10px;
  }
}
</style>
